adds notes about HOC to handle client routing #3168
Conversation
|
Deploy preview ready! Built with commit d55e34a |
|
Deploy preview ready! Built with commit 31d476a |
|
It's kind of expected that entering parameterized url without any server configuration will return 404. But if you navigate to If parameterized url would be "popular" then maybe it would be worth creating plugin to automaticly generate config/redirect files for servers (nginx / apache) / services (netlify / gh-pages / surge.sh). That is if that's actually something possible in those services - didn't really do research about that. Great job 👍 |
|
Awesome. Will try using gatsby link to get to the pages, the particular way these links were made required me to push history. Either way a reload of the page will result in a 404, so a note about server config is likely needed. This app I am setting up is using nginx, I’ll try creating the redirects and see what happens. If it was hosted on S3 it will either need redirects or not work at all? :/ I’ll see what I come up with this weekend. Thanks! |
|
This is ready, added notes about server config, and got it working for my use case in NGINX. |
Yes! This is exactly what I've hoped would happen. The only service with a plugin afaik right now is Netlify — which actually isn't yet handling creating server config for client-only routes. Would love to see similar plugins be created for all the others. |
|
@gregorskii thanks for this PR! Looks great. |
ghost
assigned 
|
|
||
| **Client:** | ||
|
|
||
| Extracting path params from the route on the client requires that you use the `react-router` `<Route>` in your component. |
There was a problem hiding this comment.
I'm surprised to hear this — the param information should be available without any more work on props.location — is this not so?
There was a problem hiding this comment.
Ya I was under the impression from convos in discord that you still needed to create client routes for the page. I could not access the route Params without it.
There was a problem hiding this comment.
Can you verify what the props.location looks like w/o the custom client routes? If it's not working, we should fix that in Gatsby's auto-created route components as it's a lot of overhead to make people add their own route components.
There was a problem hiding this comment.
Will check tomorrow, fairly certain it was empty without the route.
There was a problem hiding this comment.
Params are not passed to components.
I searched repository for matchPath and it seems gatsby only tests if path is matched and discard return value of react-router matchPath (which would have extracted params):
gatsby/packages/gatsby/cache-dir/find-page.js
Lines 35 to 47 in 57f7b0d
There was a problem hiding this comment.
Thanks for the research @pieh — so yeah, we need to fix the problem there — pass into the component the props for the matched path. @gregorskii want to tackle this?
There was a problem hiding this comment.
@gregorskii btw, do you think you'll still have a chance to look into this?
There was a problem hiding this comment.
@KyleAMathews I have not had a chance to look into it. I got pulled into another project with a short timeline at work.
I can try to look at it after, but if its a quick fix, does someone else have time?
I was able to solve this on my project with the proposed fix in this original PR, however as discussed my work around may not be needed.
|
Hey, re-reading this I'm not sure if this is worth adding to the creating pages docs page. It's a nice pattern but not a huge improvement over just writing routes directly and it's something most intermediate+ React users would figure out themselves. I think this would make a nice blog post or if we ever add a tips & tricks type section. |
Hi all,
This is per the convo on Discord this morning about a HOC for client URL params.
I am having some issues testing this in build mode... wanted to mention it here.
When using this config a new page is created in the public output as
/public/widgets/view/index.htmlbut the the route does not work in the browser. Going to/widgets/view/10is a 404,widgets/view/index.htmlworks but does not allow one to include the ID.This feels like something NGINX configs would solve, but it is supposed to work on S3 as well. S3 might work with an additional page setup as a redirect. What would be expected here?
Thanks